<!DOCTYPE html>
<html lang="zh-CN">
<head>
    <meta charset="UTF-8">
    <title>PHONE</title>
    <link rel="stylesheet" href="bower_components/font-awesome/css/font-awesome.min.css">
    <link rel="stylesheet" href="css/base.css">
    <link rel="stylesheet" href="css/index.css">
    <link rel="stylesheet" href="css/animate.css">
</head>
<body>
<!--header-->
<header class='header'>
    <div class="header__warp">
        <div class="header__logo">
            <i class="fa fa-mobile" aria-hidden="true"></i>
            <span>PHONE</span>
        </div>

        <nav class="header__nav">
            <a href="javascript:;" class="header__nav-item header__nav-item_status_active">首页</a>
            <a href="javascript:;" class="header__nav-item">外观</a>
            <a href="javascript:;" class="header__nav-item">配置</a>
            <a href="javascript:;" class="header__nav-item">型号</a>
            <a href="javascript:;" class="header__nav-item">说明</a>
            <a href="javascript:;" class="header__nav-item header__nav-item_button">立刻购买</a>
            <div class="header__nav-tip"></div>
        </nav>
    </div>
</header>

<!--第一屏-->
<section class="screen-1">
    <h2 class="screen-1__title screen-1__title_animate_init">
        <span>手机</span>
        让你的生活更精彩
    </h2>
    <img src="img/screen-1-phone.png" alt="产品图片" class="screen-1__img-product screen-1__img-product_animate_init">
    <img src="img/screen-1-shadow.png" alt="图片阴影" class="screen-1__img-shadow screen-1__img-shadow_animate_init">
</section>

<!--第二屏-->
<section class="screen-2">
    <h2 class="screen-2__title">优美的设计，更令人着迷</h2>
    <div class="screen-2__description">
        <p>采用受欢迎的设计，让它更加出色。</p>
        <p>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</p>
    </div>
    <div class="screen-2__img">
        <div class="screen-2__img-desc-1 screen-2__img-desc">高清摄像</div>
        <div class="screen-2__img-desc-2 screen-2__img-desc">超薄机身</div>
        <div class="screen-2__img-desc-3 screen-2__img-desc">大屏显示</div>
    </div>
</section>

<!--第三屏-->
<section class="screen-3">
    <div class="screen-3__warp">
        <h2 class="screen-3__title">外形小巧，功能强大的手机</h2>
        <div class="screen-3__description">
            <p>采用受欢迎的设计，让它更加出色。</p>
            <p>款式小巧、轻便手感更舒适。绚丽高清的显示屏，整个外观显得格外精致。</p>
        </div>

        <div class="screen-3__features">
            <div class="screen-3__features-item">
                <h4>5.7</h4>
                <p>英寸大屏</p>
            </div>
            <div class="screen-3__features-item">
                <h4>1200</h4>
                <p>万像素</p>
            </div>
            <div class="screen-3__features-item">
                <h4>3D</h4>
                <p>touch</p>
            </div>
            <div class="screen-3__features-item">
                <h4>A9</h4>
                <p>处理器</p>
            </div>
        </div>

        <div class="screen-3__img">
            <img src="img/screen-3-phone.png" alt="产品图片">
        </div>
    </div>
</section>

<!--第四屏-->
<section class="screen-4">
    <h2 class="screen-4__title">丰富的手机型号</h2>
    <p class="screen-4__description">找到适合你的手机</p>
    <div class="screen-4__products">
        <div class="screen-4__products-item screen-4__products-item1">
            <img src="img/phone-1.png" alt="">
            <h5>热情红</h5>
            <p>16G/32G/64G</p>
        </div>
        <div class="screen-4__products-item screen-4__products-item2">
            <img src="img/phone-2.png" alt="">
            <h5>土豪金</h5>
            <p>16G/32G/64G</p>
        </div>
        <div class="screen-4__products-item screen-4__products-item3">
            <img src="img/phone-3.png" alt="">
            <h5>太空灰</h5>
            <p>16G/32G/64G</p>
        </div>
        <div class="screen-4__products-item screen-4__products-item4">
            <img src="img/phone-4.png" alt="">
            <h5>绅士黑</h5>
            <p>16G/32G/64G</p>
        </div>
    </div>
</section>

<!--第五屏-->
<section class="screen-5">
    <h2 class="screen-5__title">游戏、学习、拍照、有这一部就够了</h2>
    <p class="screen-5__description">看视频、拍摄高清视频与照片、视频聊天、一机多功能，让您生活更丰富精彩。</p>
    <div class="screen-5__img"></div>
</section>

<!--第六屏-->
<section class="screen-buy">
    <a href="javascript:;" class="screen-buy__button">立刻购买</a>
</section>

<!--footer-->
<footer>© 2017 鄂ICP备13046642号 </footer>

<!--侧边栏-->
<div class="outline outline_animate_init">
    <a href="javascript:;" class="outline__item outline__item_status_active">首页</a>
    <a href="javascript:;" class="outline__item">外观</a>
    <a href="javascript:;" class="outline__item">配置</a>
    <a href="javascript:;" class="outline__item">型号</a>
    <a href="javascript:;" class="outline__item">说明</a>
</div>
<script src="js/index.js"></script>
</body>
</html>
